<!--
 * @Description: mockList - 模拟&机考
 * @Author: your name
 * @Date: 2024-02-22
 * @LastEditTime: 2024-02-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/studyPlan' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/questionBank' }">
        题库
      </el-breadcrumb-item>
      <el-breadcrumb-item>模拟&机考</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="tableBox">
      <div class="top">
        <p
          :class="{ act: cuid == index }"
          v-for="(item, index) in testArr"
          :key="index"
          @click="qiehuan(index)"
        >
          {{ item }}
        </p>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%; text-align: center"
        >
          <el-table-column prop="date" type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="test_name" label="试卷名称" width="400">
          </el-table-column>
          <el-table-column prop="t_num" label="总题量" width="80">
          </el-table-column>
          <el-table-column prop="duration" label="总时长"> </el-table-column>
          <el-table-column prop="accuracy" label="准确率"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div
                class="handleBtn beginTest"
                @click="handleClick(scope.row)"
                v-if="scope.row.status == 1"
              >
                开始测试
              </div>
              <div
                v-if="scope.row.status == 3"
                class="handleBtn"
                @click="handleClick(scope.row)"
              >
                查看报告
              </div>
              <!-- <div
                class="handleBtn testOver"
                v-if="scope.row.status == 2 && JSON.parse(mycate).item_id != 3"
                @click="handleClick(scope.row)"
              >
                继续测试
              </div>
              <div
                class="handleBtn testOver"
                v-if="scope.row.status == 2 && JSON.parse(mycate).item_id == 3"
                @click="handleClick(scope.row)"
              >
                阅卷中
              </div>
              <div
                class="handleBtn testOver"
                v-if="scope.row.status == 4"
                @click="handleClick(scope.row)"
              >
                考试结束
              </div> -->
            </template>
          </el-table-column>
          <el-table-column prop="address" label="排行榜">
            <template slot-scope="scope">
              <div class="rankBtn" @click="toRank(scope.row)">查看排行榜</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 排行榜 -->
    <div class="rankDialog" v-if="rankDialogShow">
      <div class="innerCon">
        <h5 class="tit">排行榜</h5>
        <div class="list">
          <div class="item isMe">
            <div class="rankNum">
              <div class="inner">我</div>
            </div>
            <div class="avatar"><img :src="MyArrLi.avatar" alt="" /></div>
            <div class="info">
              <p>132****2910</p>
              <p>正确率：22% &nbsp;&nbsp;交卷时间：{{ 12 }}</p>
            </div>
          </div>
          <div class="item" v-for="(e, index) in rankingData" :key="index">
            <div class="rankNum">
              <div class="inner">{{ index + 1 }}</div>
            </div>
            <div class="avatar"><img :src="e.avatar" alt="" /></div>
            <div class="info">
              <p title=" e.name">132****2910</p>
              <p>正确率：33% &nbsp;&nbsp;交卷时间:12</p>
            </div>
          </div>
        </div>
        <img
          class="closeBtn"
          @click="rankDialogShow = false"
          src="@/assets/images/logo_close.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getMockList, getRankingList } from '@/api/newzhike/mockList.js'
export default {
  name: 'mockLists',
  data() {
    return {
      cuid: 0, // 0 模拟 1 机考
      testArr: ['模拟考试', '机考中心'],
      tableData: [
        {
          ai_id: 357,
          test_name: '【基础阶段】CFA二级基础阶段模考卷-上半场',
          t_num: 1,
          duration: 0,
          createtime: '2024-02-21 11:31',
          accuracy: '0',
          use_time: 0,
          status: 1
        },
        {
          ai_id: 358,
          test_name: '【基础阶段】FRM二级基础阶段模考卷-下半场',
          t_num: 0,
          duration: 0,
          createtime: '2024-02-21 11:31',
          accuracy: '0',
          use_time: 0,
          status: 1
        }
      ],
      MyArrLi: {},
      rankDialogShow: false,
      rankingData: []
    }
  },
  created() {
    // this.MockList()
  },
  methods: {
    async MockList() {
      let params_m = {
        log_id: 1
      }
      const { data: date_t } = await getMockList(params_m)
      this.tableData = date_t.data.data
      console.log('模拟考试', date_t)
    },
    qiehuan(index) {
      this.cuid = index //0 是模拟  1是机考
      // this.tableData = []
    },
    async toRank() {
      this.rankDialogShow = true
      const { data: data } = await getRankingList({ test_id: 1 })
      this.rankingData = data.data.list
      console.log(data)
    },
    handleClick(dataList) {
      console.log(dataList.ai_id)

      if (dataList.ai_id == 357) {
        this.$router.push({
          path: '/newzhike/tutorial',
          query: {}
        })
      } else if (dataList.ai_id == 358) {
        this.$router.push({
          path: '/newzhike/FRM/FrmockExam',
          query: {}
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/mockList.scss';

.el-breadcrumb {
  font-size: 15px;
  line-height: 2;
}

.list {
  overflow-y: auto !important;
}
.avatar img {
  width: 100%;
  height: 100%;
}
</style>
